<!doctype html>

<html lang="zh-Hans">

<head>
  <meta charset="UTF-8">
  <title>GameOfLife</title>
  <style>
    canvas {
      background: lightgray;
      margin: 30px auto;
      display: block;
      border: 1px solid black;
    }
  </style>
  <script src="js/GameOfLife.js"></script>
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <link rel="shortcut icon" href="icon.png" type="image/x-icon">
</head>

<body style="user-select:none;">
  <h1 style="text-align:center;margin-top: 20px;">生命游戏</h1>
  <canvas id="main_canvas" height="600" width="800"></canvas>
  <div id="buttons" style="text-align:center;margin:0 auto;">
    <button id="pause">开始</button>
    <br>
    <br>
    <span>调整速度：</span>
    <input type="range" name="speed" id="speed" min="0" max="195" value="150">
    <label for="heat-death">&nbsp&nbsp热寂效果：</label>
    <input type="checkbox" name="heat-death" id="heat-death" checked="true">
    <span>&nbsp&nbsp切换工具：</span>
    <select name="tool" id="tool"></select>
    <span>&nbsp&nbsp笔刷大小：</span>
    <input type="range" name="brush-size" id="brush-size" min="1" max="9" value="5" step="2">
    <br>
    <br>
    <span>宇宙大小：</span>
    <input type="range" name="map-size" id="map-size" min="0" max="3" value="1" step="1">
    <span>&nbsp&nbsp宇宙法则(B3/S23)： B</span>
    <input type="text" id="b" value="3" οnkeyup="value=value.replace(/[^\d]/g,'')" size="4">
    <span>/S</span>
    <input type="text" id="s" value="23" οnkeyup="value=value.replace(/[^\d]/g,'')" size="4">
    <button id="bs-default">恢复默认</button>
    <br>
    <br>
  </div>
  <script>
    function main() {
      const buttonDefault = document.getElementById("bs-default");
      const txtB = document.getElementById("b");
      const txtS = document.getElementById("s");

      buttonDefault.addEventListener("click", () => {
        txtB.value = '3';
        txtS.value = '23';
        txtB.onchange();
        txtS.onchange();
      })

      const selectTool = document.getElementById("tool");
      const toolNames = Object.keys(tools);
      for (let i = 0; i < toolNames.length; i++) {
        const toolName = toolNames[i];
        const optionTool = document.createElement("option");
        optionTool.text = toolName;
        optionTool.value = toolName;
        selectTool.appendChild(optionTool);
      }

      selectTool.value = toolNames[0];

      const game = new GameOfLife();
      game.setMap(defaultMap);
      game.run();
    }
    main();
  </script>
</body>

</html>